<script setup lang="ts">
import { tableConfig } from './config/table-config';
import { searchConfig } from './config/search-config';

import { doGetMaterialList } from '@/api/base/supplier/index';
import { generateNameToLevel } from '@/config/constant';

import type { MaterialRecords } from '@/api/base/supplier/model/type';

const disabledList = ref<Partial<MaterialRecords>[]>([]);

const open = (list: Partial<MaterialRecords>[]) => {
    materialList.value = [];
    disabledList.value = list;
    visible.value = true;
};
const disabledSelect = (row: MaterialRecords) =>
    !disabledList.value.some(item => row.id === item.materialId);

const { getMaxHeight, modalSlotRef, handleFullscreen, visible } = useModal();

const materialList = ref<MaterialRecords[]>([]);
const selection = (material: MaterialRecords[]) => {
    materialList.value = material.map(item => {
        return { ...item, materialId: item.id, finishedProductRate: null };
    });
};

const emit = defineEmits(['submit', 'close']);

const submit = () => {
    emit('submit', materialList.value);
    visible.value = false;
};

const router = useRouter();
const toLink = () => {
    visible.value = false;
    router.push('/materialsManagement');
    emit('close');
};

defineExpose({
    open
});
</script>

<template>
    <q-modal
        v-model:visible="visible"
        title="选择物料"
        :centered="true"
        :fullscreen="true"
        width="960px"
        @fullscreen="handleFullscreen"
        @ok="submit"
    >
        <base-search :search-config="searchConfig" :table-ref="modalSlotRef">
            <q-push-button :is-text="false" @click="toLink" />
        </base-search>
        <base-table
            :id="generateNameToLevel('1')"
            ref="modalSlotRef"
            :modal-mode="true"
            :max-height="getMaxHeight"
            :get-data-fn="doGetMaterialList"
            :table-config="tableConfig"
            :show-setting="false"
            :selectable="disabledSelect"
            :un-action="true"
            @selection-change="selection"
        />
    </q-modal>
</template>

<style scoped lang="scss"></style>
